/*--------------------------------------------- vueh5_less预处理created by ycd 2020/5/20 ------------------------------------------*/
// translateZ(0)可以清除css3属性带来的锯齿
// -webkit-transform: rotate(5deg) translateZ(0);

// 单行文本   ----singleline
.sl {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

// 多行文本 ----Multiple rows
.ml(@rowCount: 2) {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: $rowCount;
    -webkit-box-orient: vertical;
}

// 定义响应式单位:
.res(@attr, @px) {
    @media (min-width:768px) {
        @{attr}: unit(@px/40, rem);
    }

    @media (max-width:768px) {
        @{attr}: unit(@px/100, rem);
    }
}

// 公共圆角
.radius(@radius: 5px) {
    border-radius: @radius;
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
}

//公共阴影
// @第个值 右边阴影为正数 左边负数
// @第二个值 下边阴影为正数 上边负数
// @第三个值  阴影大小
// @第四个值 阴影颜色
.boxshadow(@arguments) {
    -webkit-box-shadow: @arguments;
    -moz-box-shadow: @arguments;
    box-shadow: @arguments;
}

// 文字阴影：同上盒子阴影
.textshadow(@arguments) {
    text-shadow: @arguments;
    -moz-text-shadow: @arguments;
    -webkit-text-shadow: @arguments;
}

//公共动画效果
.animation(@args) {
    -webkit-animation: @args;
    -moz-animation: @args;
    -ms-animation: @args;
    -o-animation: @args;
    animation: @args;
}

//公共过度
.transition(@args: all 0.3s linear) {
    -webkit-transition: @args;
    -o-transition: @args;
    -ms-transition: @args;
    -moz-transition: @args;
    transition: @args;
}

// 共用变换
.transform(@args) {
    -webkit-transform: @args;
    -moz-transform: @args;
    transform: @args;
}

// rgba(兼容ie)
#rgba(@r, @g, @b, @a) {
    @c: rgba(@r, @g, @b, @a);
    @c2 : argb(@c);
    /* for IE9 IE8 IE7 not sure about IE6*/
    filter:~"progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='@{c2}', endColorstr='@{c2}')";
    background-color: @c;

    :root & {
        /* 
         * IE9 由于rgba和filter都支持，会导致两个颜色叠加，使用hack去除 
         * \9 代表 IE9 以下浏览器支持
         * :root 只有 IE9+ 以及其他现代浏览器支持
         * IE10 以上不再支持 filter
        */
        filter: none;
    }
}

// exp:#rgba(0,0,0,0.1);
//透明度(兼容ie)
.opacity (@opacity) {
    @opacityPercentage: @opacity * 100;
    opacity: @opacity;
    -ms-filter:~"progid:DXImageTransform.Microsoft.Alpha(opacity=(@{opacityPercentage}))";
    filter:~"alpha(opacity = (@{opacityPercentage}))";
}

//css3帧动画
.keyframes (@name, @frames) {
    @-webkit-keyframes @name {
        @frames();
    }

    @-moz-keyframes @name {
        @frames();
    }

    @-ms-keyframes @name {
        @frames();
    }

    @-o-keyframes @name {
        @frames();
    }

    @keyframes @name {
        @frames();
    }
}

//例子
// .keyframes (line, {  
//     0%{background-size:0% 2px;}  
//     100%{background-size:100% 2px;}  
// }); 
// css3背景大小
.backgroundSize(@size: contain) {
    -webkit-background-size: @size; // 某些android 例如 Ophone 要加上 -webkit 的前缀  
    -moz-background-size: @size;
    -ms-background-size: @size;
    -o-background-size: @size;
    background-size: @size;
    background-position: center center;
    background-repeat: no-repeat;
}

// ie盒子模型
.borderbox {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

// 段落两端对齐
.justify {
    text-align: justify;
    text-justify: distribute-all-lines;
    text-align-last: justify;
    -moz-text-align-last: justify;
    -webkit-text-align-last: justify;
}

// 设置placeholder字体颜色(需要在input父盒子上设置)
.placeholder(@args: #ccc) {
    ::-webkit-input-placeholder {
        color: @args;
    }

    :-moz-placeholder {
        color: @args;
    }

    ::-moz-placeholder {
        color: @args;
    }

    :-ms-input-placeholder {
        color: @args;
    }
}

// 重载函数  
.vendor(@property, @value) {
    -webkit-@{property}: @value;
    -khtml-@{property}: @value;
    -moz-@{property}: @value;
    @{property}: @value;
}

.vendor(@property, @value, @value2) {
    -webkit-@{property}: @value, @value2;
    -khtml-@{property}: @value, @value2;
    -moz-@{property}: @value, @value2;
    @{property}: @value, @value2;
}


/*背景渐变
@start  渐变开始颜色
@end  结束颜色
*/

// 垂直渐变(从上到下)
.gradient (@startColor: #eee, @endColor: white) {
    background-color: @startColor;
    background: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
    background: -webkit-linear-gradient(top, @startColor, @endColor);
    background: -moz-linear-gradient(top, @startColor, @endColor);
    background: -ms-linear-gradient(top, @startColor, @endColor);
    background: -o-linear-gradient(top, @startColor, @endColor);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=@startColor ,
            endColorstr=@endColor , grandientType=0);
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=@startColor ,
            endColorstr=@endColor , grandientType=0);
}

// 水平渐变(从左到右)
.horizontal-gradient (@startColor: #eee, @endColor: white) {
    background-color: @startColor;
    background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
    background-image: -webkit-linear-gradient(left, @startColor, @endColor);
    background-image: -moz-linear-gradient(left, @startColor, @endColor);
    background-image: -ms-linear-gradient(left, @startColor, @endColor);
    background-image: -o-linear-gradient(left, @startColor, @endColor);
    background-image: linear-gradient(left, @startColor, @endColor);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=@startColor ,
            endColorstr=@endColor , GradientType=1);
    -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=@startColor ,
            endColorstr=@endColor , GradientType=1);
}

.my-inline-block {
    display: inline-block;
    font-size: 0;
}

// &:extend(.my-inline-block);

/*--------------------------------------------- 布局样式2018.2.26新增合并 ------------------------------------------*/

// 盒子宽高  
.size(@w, @h) {
    width: @w;
    height: @h;
}

// 最小尺寸, 兼容IE6  
.min-width(@min-w) {
    min-width: @min-w;
    _width: @min-w;
}

.min-height(@min-h) {
    min-height: @min-h;
    _height: @min-h;
}

// 内联块级元素, 兼容IE6  
.dib() {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

// 固定定位, 兼容IE6  
.fixed() {
    position: fixed;
    _position: absolute;
    *zoom: 1;
}

// 统一盒模型  
.border-box() {

    *,
    *:after,
    *:before {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }
}

// 文字图片居中  
.center(text-x) {
    text-align: center;
}

.center(text-y) {
    display: table-cell;
    vertical-align: middle;
}

// 块级元素水平居中  
.center(auto-x) {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

// 居中, 不确定尺寸, 不兼容 IE6  
.center(unknown) {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.center(unknown-x) {
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

.center(unknown-y) {
    position: absolute;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
}

// 居中, 确定尺寸, 兼容 IE6  
.center(known, @w, @h) {
    .size(@w, @h);
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -(@w / 2);
    margin-left: -(@h / 2);
}

.center(known-x, @w) {
    width: @w;
    position: absolute;
    left: 50%;
    margin-left: -(@h / 2);
}

.center(known-y, @h) {
    height: @h;
    position: absolute;
    top: 50%;
    margin-top: -(@w / 2);
}

// 居中, CSS3 平移方式, 兼容性不行  
.center(translate) {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

// 居中, Flex 方式, 兼容性不行  
.center(flex) {
    display: flex;
    align-items: center;
    justify-content: center;
}

// 多个子项布局  
.list(float, @w: 25%) {
    float: left;
    width: @w;
}

.list(inline, @w: 25%) {
    .dib();
    width: @w;
}

.list(flex) {
    flex: 1;
}

// 遮罩层, 全屏遮罩、区域遮罩  
.over-screen(fixed) {
    .fixed();
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.over-screen(absolute) {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

// 模糊  
.blur(@blur: 10px) {
    filter: blur(@blur);
    -webkit-filter: blur(@blur);
    -moz-filter: blur(@blur);
    -o-filter: blur(@blur);
    -ms-filter: blur(@blur);
    filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='@{blur}');
    *zoom: 1;
}

// 三维闪动 bug 处理  
.transform-fix() {
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
}

// 三角形  
.sj(@width: 4px, @color: #000) {
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: middle;
    border-top: @width solid @color;
    border-left: @width solid transparent;
    border-right: @width solid transparent;
}

.arrow(top, @w: 10px, @color, @x: 50%) {
    position: relative;

    &:before {
        position: absolute;
        bottom: 100%;
        left: @x;
        content: " ";
        height: 0;
        width: 0;
        pointer-events: none;
        border-style: solid;
        border-color: transparent;
        border-bottom-color: @color;
        border-width: unit(@w, px);
        @margin: -@w;
        margin-left: unit(@margin, px);
    }
}

.arrow(right, @w: 10px, @color, @y: 50%) {
    position: relative;

    &:before {
        position: absolute;
        left: 100%;
        top: @y;
        content: " ";
        height: 0;
        width: 0;
        pointer-events: none;
        border-style: solid;
        border-color: transparent;
        border-left-color: @color;
        border-width: unit(@w, px);
        @margin: -@w;
        margin-top: unit(@margin, px);
    }
}

.arrow(bottom, @w: 10px, @color, @x: 50%) {
    position: relative;

    &:before {
        position: absolute;
        top: 100%;
        left: @x;
        content: " ";
        height: 0;
        width: 0;
        pointer-events: none;
        border-style: solid;
        border-color: transparent;
        border-top-color: @color;
        border-width: unit(@w, px);
        @margin: -@w;
        margin-left: unit(@margin, px);
    }
}

.arrow(left, @w: 10px, @color, @y: 50%) {
    position: relative;

    &:before {
        position: absolute;
        right: 100%;
        top: @y;
        content: " ";
        height: 0;
        width: 0;
        pointer-events: none;
        border-style: solid;
        border-color: transparent;
        border-right-color: @color;
        border-width: unit(@w, px);
        @margin: -@w;
        margin-top: unit(@margin, px);
    }
}



.flex-row-wrap(@pos: center) {
    display: flex;
    flex-flow: row wrap;
    align-items: @pos;
}

.flex-row-nowrap(@pos: center) {
    display: flex;
    flex-flow: row nowrap;
    align-items: @pos;
}

.flex-nowrap-sb(@pos: center) {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: @pos;
}

.flex-wrap-sb(@pos: center) {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: @pos;
}

.flex-mid {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
}

.flex-column {
    display: flex;
    flex-flow: column nowrap
}

.flex-column-mid {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
}


.tf1(@tmf: linear) {
    transition: all 0.1s @tmf;
}

.tf2(@tmf: linear) {
    transition: all 0.2s @tmf;
}

.tf3(@tmf: linear) {
    transition: all 0.3s @tmf;
}

.tf4(@tmf: linear) {
    transition: all 0.4s @tmf;
}

.tf5(@tmf: linear) {
    transition: all 0.6s @tmf;
}

.tf10(@tmf: linear) {
    transition: all 1s @tmf;
}

.c3 {
    color: #333;
}

.c6 {
    color: #666;
}

.c9 {
    color: #999;
}

.cf {
    color: #fff;
}

.cb {
    color: #000
}

.fb {
    font-weight: bold;
}

.l1 {
    line-height: 1;
}


/*--------------- 图片固定高度背景图片 ---------*/


/*<div class="fast-image"> 
    <div class="fast-contain" style:"background-image: url(images/...);"> 
</div>*/

// 背景图片高度
.fast-image(@args) {
    width: 100%;
    height: @args;
    display: block;
    overflow: hidden;
    position: relative;
}

// 背景图片覆盖
.fastBg(@args: cover) {
    width: 100%;
    height: 100%;
    display: block;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: @args;
}

.bz(@size: cover) {
    -webkit-background-size: @size;
    -moz-background-size: @size;
    -ms-background-size: @size;
    -o-background-size: @size;
    background-size: @size;
    background-position: center center;
    background-repeat: no-repeat;
}

.hl(@h) {
    height: @h;
    line-height: @h
}

.circle(@width) {
    width: @width;
    height: @width;
    border-radius: 50%;
}

.posc {
    position: absolute;
    top: 50%;
    left: 50%;
    .transform(translate(-50%, -50%));
}

.posy {
    position: absolute;
    top: 50%;
    left: 0;
    .transform(translateY(-50%));
}

.phsx {
    position: absolute;
    top: 50%;
    left: 0;
    .transform(translateX(-50%));
}

.posfull {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.posb(@h: auto, @c: #ccc, @p: center) {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    height: @h;
    line-height: @h;
    background-color: @c;
    text-align: @p;
}

.fullimg {
    width: 100%;
    display: block;
    max-width: 100%;
}

.bgImg(@w: 0, @h: 0, @img: '', @size: contain) {
    display: inline-block;
    width: @w;
    height: @h;
    background: url(@img) no-repeat center;
    background-size: @size;
}

.posImg(@pos: absolute, @top: 0, @right: 0, @w: 0, @h: 0, @img: '', @size: contain) {
    position: @pos;
    top: @top;
    right: @right;
    width: @w;
    height: @h;
    background: url(@img) no-repeat center;
    background-size: @size;
}


.position(@pos: absolute, @top: 0, @left: 0, @w: 100%, @h: 100%) {
    position: @pos;
    top: @top;
    left: @left;
    width: @w;
    height: @h;
}


.height(@h: 0, @lh: @h) {
    height: @h;
    line-height: @lh;
}

.wH(@w: 0, @h: 0) {
    width: @w;
    height: @h;
}

.border(@bw: 1px, @bc: @colorF, @bs: solid) {
    border: @bw @bs @bc;
}

/* 根据dpr显示2x图/3x图 */
.bg-image(@url) {
    background-image:~"url('@{url}@2x.png')";

    @media (-webkit-min-device-pixel-ratio: 3),
    (min-device-pixel-ratio: 3) {
        background-image:~"url('@{url}@3x.png')";
    }
}

.bg-imageN(@url) {
    background-image:~"url('@{url}.png')";
}

// 扩展点击区域
.extend-click {
    position: relative;

    &:after {
        content: '';
        position: absolute;
        top: -10px;
        left: -10px;
        right: -10px;
        bottom: -10px;
    }
}